<!-- 公司名片 公司简介 -->
<template>
  <div>
    <Form ref="form" :model="editorInfo" :rules="rules" :label-width="110" v-if="isEdit">
      <FormItem label="简介概要:" prop="companySummary">
        <div class="tips">
          <Icon type="md-alert" class="tips_icon" />
          “概要”为必填内容，将显示于名片首页。至多可输入200字内容并可上传1张图片
        </div>
        <Input
          v-model="editorInfo.companySummary"
          maxlength="200"
          :autosize="{ minRows: 6, maxRows: 6 }"
          show-word-limit
          type="textarea" />
      </FormItem>
      <FormItem label="简介封面:" class="FormItemUpload">
        <div class="upload_content">
          <div>
            <div v-if="picUrl" class="demo-upload-list">
              <img :src="picUrl" />
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click="handleView(picUrl, 'img')"></Icon>
                <Icon type="ios-trash-outline" @click="handleRemove(picUrl, 'img')"></Icon>
              </div>
            </div>
            <Upload
              ref="upload"
              v-if="!picUrl"
              :show-upload-list="false"
              :data="upload.data"
              name="multipartFile"
              :headers="upload.headers"
              :on-success="handleSuccess"
              :format="['jpg', 'jpeg', 'png']"
              type="drag"
              :max-size="10240"
              :on-exceeded-size="handleMaxSize"
              :on-format-error="handleFormatError"
              :action="upload.reqUrl"
              :before-upload="beforeUpload"
              style="display: inline-block; width: 80px; marginright: 20px">
              <div style="width: 80px; height: 80px; line-height: 80px">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </div>
          <div class="tips lines">
            <Icon type="md-alert" class="tips_icon" />
            1.图片为选填内容，上传后将显示于名片首页
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.仅能上传1张图片，大小不超过10M；
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.图片建议高度341像素，宽度不限；
          </div>
        </div>
      </FormItem>
      <FormItem label="简介详情:" prop="companyDetail">
        <div class="tips">
          <Icon type="md-alert" class="tips_icon" />
          提示：“详情”为选填内容，可支持多张图片及富媒体内容。如不填写，则该部分内容将在名片中隐藏
        </div>
        <dt-editor v-model="editorInfo.companyDetail" :height="250"></dt-editor>
      </FormItem>
      <div class="footer">
        <Button @click="reset" style="margin-left: 8px">取消</Button>
        <Button type="primary" :loading="loading" @click="submit">保存</Button>
      </div>
    </Form>

    <div v-if="!isEdit">
      <div class="view_content">
        <div class="label">简介概要:</div>
        <div class="content">{{ editorInfo.companySummary }}</div>
      </div>
      <div class="view_content">
        <div class="label">概要图片:</div>
        <div class="content">
          <div v-if="picUrl" class="demo-upload-list">
            <img :src="picUrl" />
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click="handleView(picUrl, 'img')"></Icon>
            </div>
          </div>
        </div>
      </div>
      <div class="view_content">
        <div class="label">简介概要:</div>
        <div class="content editor_content" v-html="editorInfo.companyDetail"></div>
      </div>
    </div>
    <!-- 图片放大 -->
    <preview-image :images="preViewImg" :showIndex="0" ref="preViewImage"></preview-image>
  </div>
</template>

<script>
  import companyApi from '@/biz/backStage/companyCard'
  import toolMgr from '@/biz/base/tool.js'
  import dtEditor from '@/components/dt/editor/index.vue'

  export default {
    components: { dtEditor },
    data() {
      return {
        preViewImg: [],
        upload: toolMgr.unloadImage({ title: new Date().getTime() }),
        editorInfo: {
          companySummary: '',
          companyDetail: ''
        },
        loading: false,
        rules: {
          companySummary: [{ required: true, message: '请输入简介概要', trigger: 'change,blur' }]
        },
        picUrl: '',
        isEdit: this.$route.query.isEdit == 'view' ? false : true
      }
    },
    methods: {
      proFileInit(data) {
        console.log(data)
        this.editorInfo = data
        this.picUrl = data.picUrl ? data.picUrl : ''
      },
      // 上传前
      beforeUpload() {
        this.picUrl = ''
      },
      // 上传成功回调
      handleSuccess(res, file) {
        console.log(res, '上传成功')
        if (res.code == '200') {
          this.picUrl = res.data.imageURL
          console.log(this.picUrl)
        } else {
          console.log('上传出错')
        }
      },
      handleMaxSize(file) {
        this.$Message.warning('单个图片不能超过10M')
      },
      // 文件格式验证失败
      handleFormatError(file) {
        this.$Message.warning('请上传图片。')
      },
      handleView(val, type) {
        this.preViewImg = [val]
        this.$refs.preViewImage.show()
      },
      handleRemove(val, type) {
        this.picUrl = ''
      },
      reset() {
        this.$router.go(-1)
      },
      submit() {
        console.log('提交')
        this.$refs.form.validate((valid) => {
          let params = {
            companySummary: this.editorInfo.companySummary,
            companyDetail: this.editorInfo.companyDetail,
            picUrl: this.picUrl,
            id: this.editorInfo.id
          }
          if (valid) {
            this.loading = true
            companyApi
              .updateCompanyIntroduction(params)
              .then((res) => {
                this.loading = false
                this.$emit('success')
                this.$Message.success('保存成功')
                this.hide()
              })
              .catch((err) => {
                this.loading = false
              })
          }
        })
      }
    },
    mounted() {}
  }
</script>
<style lang="scss" scoped>
  .upload_content {
    display: flex;
  }
  .footer {
    text-align: center;
    button {
      margin: 0 10px;
    }
  }
  // 上传
  .demo-upload-list {
    display: inline-block;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 20px;
  }
  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }
  .demo-upload-list video {
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .tips {
    font-size: 14px;
    color: #999;
    line-height: 36px;
    min-height: 36px;
    margin-bottom: 15px;
    background-color: rgba(254, 252, 236, 1);
    width: 100%;
    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
    }
  }
  .lines {
    line-height: 1.8;
  }
  .view_content {
    display: flex;
    .label {
      width: 110px;
      text-align: right;
      font-size: 14px;
      color: #515a6e;
      padding: 10px 12px 10px 0;
    }
    .content {
      flex: 1;
      font-size: 14px;
      padding: 10px 0 10px 0;
    }
    .editor_content {
      ::v-deep img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
